<script setup>
import CarouselHome from "@/components/CarouselHome.vue";
import TripleInfoBlock from "@/components/TripleInfoBlock.vue";
import TextInput from "@/components/TextInput.vue";

</script>

<template>
<CarouselHome/>
  <div class="flex justify-center items-center h-full pt-20">
    <div class="w-4/6">
      <div class="text-center space-y-6">
        <h2 class="text-4xl font-bold">We are Createx Construction Bureau</h2>
        <p class="text-gray-700/70 pb-10">We are rightfully considered to be the best construction company in the USA.</p>
      </div>
      <div class="relative inline-block w-full">
        <img src="../assets/video-thumbnail.png" class="h-auto mx-auto" alt="video thumbnail">
        <div class="absolute inset-0 bg-gray-900 opacity-60"></div>
        <img src="../assets/play-button.svg" class="w-14 z-10 absolute inset-0 m-auto" alt="">
        <div class="z-20 absolute inset-0 top-[80%] left-[4%] w-9 h-9 bg-white/15 rounded-full flex items-center justify-center">
          <img src="../assets/volume.svg" class="z-10 w-3 h-3" alt="">
        </div>
      </div>
    </div>
  </div>
  <div class="flex pb-12">
    <TripleInfoBlock
        title="Our core values"
        subtitle="Our mission is to set the highest standards for construction sphere."
        :items="[
        { icon: '/src/assets/ic-like.svg', title: 'Quality', description: 'Culpa nostrud commodo ea consequat aliquip reprehenderit. Veniam velit nostrud aliquip sunt.' },
        { icon: '/src/assets/ic-hand.svg', title: 'Safety', description: 'Anim reprehenderit sint voluptate exercitation adipisicing laborum adipisicing. Minim empor est ea.' },
        { icon: '/src/assets/ic-slippers.svg', title: 'Comfort', description: 'Sit veniam aute dolore adipisicing nulla sit culpa. Minim mollit voluptate ullamco proident ea ad.' }
      ]"
    />
  </div>
  <div class="flex justify-center">
    <div class="w-4/6 text-center space-y-6 px-11">
      <h3 class="text-xl font-bold">Want to know more? Ask us a question:</h3>
      <div class="flex justify-evenly">
        <TextInput type="light" place-holder="Your name" input-label="Name" class="w-full"/>
      </div>
    </div>
  </div>
</template>

<style scoped>

</style>